$(function () {
  // 需求1: 自定义校验规则
  let form = layui.form;
  form.verify({
    // form.verify()可以定义校验规则
    // 属性是规则名称，值是具体规则，有两种数组和函数！
    nickname: [/^[\S]{4,10}$/, "昵称必须4到10位，且不能出现空格"],
  });

  // 需求2: ajax获取用户信息，渲染到页面上
  //    渲染用户信息功能，重置的时候还要用，所以封装成函数;
  let layer = layui.layer;
  initUserInfo();
  // 封装成函数
  function initUserInfo() {
    // ajax获取用户信息
    axios({
      method: "GET",
      url: "/my/userinfo",
    }).then((res) => {
      // console.log(res.data);
      // 判断状态
      if (res.data.status !== 0) {
        return layer.msg(res.data.message);
      }
      form.val("formUserInfo", res.data.data);
    });
  }

  // 需求3: 重置表单;
  // $("form").on('reset', function (e) {
  $("#btnReset").on("click", function (e) {
    // 阻止默认行为
    e.preventDefault();
    // 重新渲染form表单
    initUserInfo();
  });

  // 需求4: 提交表单;
  $("form").on("submit", function (e) {
    // 阻止默认行为
    e.preventDefault();
    // 发送ajax，实现用户信息修改
    axios({
      method: "POST",
      url: "/my/userinfo",
      // 后端只支持 a=1&b=2&c=3 类型的参数
      data: $(this).serialize(),
    }).then((res) => {
      // 状态判断
      if (res.data.status !== 0) {
        return layer.msg(res.data.message);
      }
      // 成功提示
      layer.msg("修改用户信息成功！");
      // window.parent就是找当前页面父页面的window
      //  当初getUserInfo()定义为全局函数了，所以他就是window的子方法！
      window.parent.getUserInfo();
    });
  });
});
